<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue-2.5.16.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- v-on 处理事件 ；简写的方式 :@-->
			用户名：<input type="text" @blur="check_username" v-model="uname">
			<p>{{uname}}</p>
		</div>
		
		
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					uname:''
				},
				methods:{
					check_username:function(){
						// 检查用户名
						//1、获取文本框中的值 this.uname
						var uname=this.uname;
						//2、将获取到的文本框中的值提交给服务器
					axios.get('http://127.0.0.1:8000/checknames?name='+uname).then(function(data){
						console.log(data.data)
						alert(data.data.errmsg)
					})
						
					}
				}
			})
		</script>
	</body>
</html>
